// 颜色变量
// 主题色
$main-color: #8848cb;
// 淡主题色
$main-ti-color: #f4ecfd;
// 副主题色
$main-min-color: #ef885f;
// 灰色背景
$bg-grey: #f4f4f4;
// 成功
$success-color: #07c160;
// 淡成功色
$success-min-color: #f1f9f5;
// 警告
$warning-color: #faad14;
// 淡警告色
$warning-min-color: #fff0e3;
// 失败
$error-color: #fa5151;
// 淡失败色
$error-min-color: #fbeeed;
// 描述文字颜色
$text-color: #636066;
// 提示文字颜色
$text-min-color: #949099;
// 盒阴影、边框颜色
$box-bor-color: #f1f1f1;

// 动态生成常用样式
@for $i from 1 through 600 {
  .h-#{$i} {
    height: 1rpx * $i * 2;
  }
}

@for $i from 1 through 375 {
  .w-#{$i} {
    width: 1rpx * $i * 2;
  }
  .wh-#{$i} {
    width: 1rpx * $i * 2;
    height: 1rpx * $i * 2;
  }
  .line-height-#{$i} {
    line-height: 1px * $i;
  }
}

@for $i from -50 through 100 {
  .zIndex-#{$i} {
    z-index: $i;
  }
  .top-#{$i} {
    top: 1px * $i;
  }
  .bottom-#{$i} {
    bottom: 1px * $i;
  }
  .left-#{$i} {
    left: 1rpx * $i * 2;
  }
  .right-#{$i} {
    right: 1rpx * $i * 2;
  }
}

@for $i from 1 through 24 {
  .grid-#{$i} {
    display: grid;
    grid-template-columns: repeat($i, 1fr);
  }
  .span-#{$i} {
    grid-column: span $i; /* 网格项跨越的列数 */
  }
}

@for $i from 1 through 100 {
  .text-size-#{$i} {
    font-family: myFont;
    font-size: 1rpx * $i * 2;
  }
  .bor-rad-#{$i} {
    border-radius: 1px * $i;
  }
  .gap-#{$i} {
    gap: 1rpx * $i * 2;
  }
  .mr-#{$i} {
    margin-right: 1rpx * $i * 2;
  }
  .ml-#{$i} {
    margin-left: 1rpx * $i * 2;
  }
  .mt-#{$i} {
    margin-top: 1rpx * $i * 2;
  }
  .mb-#{$i} {
    margin-bottom: 1rpx * $i * 2;
  }
  .mx-#{$i} {
    margin-left: 1rpx * $i * 2;
    margin-right: 1rpx * $i * 2;
  }
  .my-#{$i} {
    margin-top: 1rpx * $i * 2;
    margin-bottom: 1rpx * $i * 2;
  }
  .m-#{$i} {
    margin: 1rpx * $i * 2;
  }
  .pr-#{$i} {
    padding-right: 1rpx * $i * 2;
  }
  .pl-#{$i} {
    padding-left: 1rpx * $i * 2;
  }
  .pt-#{$i} {
    padding-top: 1rpx * $i * 2;
  }
  .pb-#{$i} {
    padding-bottom: 1rpx * $i * 2;
  }
  .px-#{$i} {
    padding-right: 1rpx * $i * 2;
    padding-left: 1rpx * $i * 2;
  }
  .py-#{$i} {
    padding-top: 1rpx * $i * 2;
    padding-bottom: 1rpx * $i * 2;
  }
  .p-#{$i} {
    padding: 1rpx * $i * 2;
  }
}

.bor-rad-round {
  border-radius: 50%;
}

.shadow {
  box-shadow: 0px 0px 10px $box-bor-color;
}

/*  字体大小 */
.text-24 {
  font-size: 48rpx;
  font-family: myFont;
  font-weight: bold;
}

.text-22 {
  font-size: 44rpx;
  font-family: myFont;
  font-weight: bold;
}

.text-20 {
  font-size: 40rpx;
  font-family: myFont;
  font-weight: bold;
}

.text-18 {
  font-size: 36rpx;
  font-family: myFont;
  font-weight: bold;
}

.text-16 {
  font-size: 32rpx;
  font-family: myFont;
  font-weight: bold;
}

.text-14 {
  font-family: myFont;
  font-size: 28rpx;
}

.text-12 {
  font-family: myFont;
  font-size: 24rpx;
}

.text-10 {
  font-family: myFont;
  font-size: 20rpx;
}

.text-bold {
  font-weight: bold;
}

/* 字体颜色 */
/* 主色 */
.text-main {
  color: $main-color !important;
}

/* 辅助色 */
.text-main-min {
  color: $main-min-color;
}

/* 成功 */
.text-success {
  color: $success-color;
}

/* 警告 */
.text-warning {
  color: $warning-color;
}

/* 失败 */
.text-error {
  color: $error-color;
}

/* 提示 */
.text-ti {
  color: $text-min-color;
}

/* 次要文字 */
.text-min-color {
  color: $text-color;
}

/* 白色 */
.text-white {
  color: white;
}

/* 背景颜色 */
/* 主色 */
.bg-main {
  background-color: $main-color;
}

.bg-main-ti {
  background-color: $main-ti-color;
}

.bg-ti {
  background-color: $bg-grey;
}

/* 警告按钮背景色 */
.bg-warning {
  background-color: $warning-color;
}

.bg-warning-ti {
  background-color: $warning-min-color;
}

/* 成功按钮背景色 */
.bg-success {
  background-color: $success-color;
}

.bg-success-ti {
  background-color: $success-min-color;
}

/* 失败按钮背景色 */
.bg-error {
  background-color: $error-color;
}

.bg-error-ti {
  background-color: $error-min-color;
}

.bg-white {
  background-color: white;
}

.img-size-24 {
  width: 48rpx;
  height: 48rpx;
}

.img-size-18 {
  width: 36rpx;
  height: 36rpx;
}

.img-size-16 {
  width: 32rpx;
  height: 32rpx;
}

.img-size-14 {
  width: 28rpx;
  height: 28rpx;
}

.img-size-40 {
  width: 80rpx;
  height: 80rpx;
}

//定位布局
.posi-fix {
  position: fixed;
  /* #ifdef H5 */
  position: fixed !important;
  /* #endif */
}

.posi-re {
  position: relative;
  /* #ifdef H5 */
  position: relative !important;
  /* #endif */
}

.posi-ab {
  position: absolute;
  /* #ifdef H5 */
  position: absolute !important;
  /* #endif */
}

/* 弹性布局 */
.flex {
  display: flex;
  /* #ifdef H5 */
  display: flex !important;
  /* #endif */
}

.flex-col {
  display: flex;
  flex-direction: column;
  /* #ifdef H5 */
  display: flex !important;
  flex-direction: column !important;
  /* #endif */
}

.flex-row {
  display: flex;
  flex-direction: row;
  /* #ifdef H5 */
  display: flex !important;
  flex-direction: row !important;
  /* #endif */
}

.flex-nwrap {
  display: flex;
  flex-wrap: nowrap;
  /* #ifdef H5 */
  display: flex !important;
  flex-wrap: nowrap !important;
  /* #endif */
}

.flex-wrap {
  display: flex;
  flex-wrap: wrap;
  /* #ifdef H5 */
  display: flex !important;
  flex-wrap: wrap !important;
  /* #endif */
}

.flex-1 {
  display: flex;
  flex: 1;
  /* #ifdef H5 */
  display: flex !important;
  flex: 1 !important;
  /* #endif */
}

.shrink-0 {
  flex-shrink: 0;
}

.jty-start {
  display: flex;
  justify-content: flex-start;
  /* #ifdef H5 */
  display: flex !important;
  justify-content: flex-start !important;
  /* #endif */
}

.jty-end {
  display: flex;
  justify-content: flex-end;
  /* #ifdef H5 */
  display: flex !important;
  justify-content: flex-end !important;
  /* #endif */
}

.jty-center {
  display: flex;
  justify-content: center;
  /* #ifdef H5 */
  display: flex !important;
  justify-content: center !important;
  /* #endif */
}

.jty-btn {
  display: flex;
  justify-content: space-between;
  /* #ifdef H5 */
  display: flex !important;
  justify-content: space-between !important;
  /* #endif */
}

.jty-aud {
  display: flex;
  justify-content: space-around;
  /* #ifdef H5 */
  display: flex !important;
  justify-content: space-around !important;
  /* #endif */
}

.items-start {
  display: flex;
  align-items: flex-start;
  /* #ifdef H5 */
  display: flex !important;
  align-items: flex-start !important;
  /* #endif */
}

.items-end {
  display: flex;
  align-items: flex-end;
  /* #ifdef H5 */
  display: flex !important;
  align-items: flex-end !important;
  /* #endif */
}

.items-center {
  display: flex;
  align-items: center;
  /* #ifdef H5 */
  display: flex !important;
  align-items: center !important;
  /* #endif */
}

.over-hidden {
  overflow: hidden;
}

.text-over-nvue {
  overflow: hidden;
  text-overflow: ellipsis;
  //强制不换行
  lines: 1;
}

/* #ifdef H5 */
.tran-all {
  transition: all 0.2s ease-in-out;
}
/* #endif */

// 不属于nvue样式
// #ifndef APP-PLUS-NVUE
.scroll-view {
  // #ifdef H5
  height: calc(100vh - 55px);
  // #endif
  // #ifndef H5
  height: calc(100vh - 100px);
  // #endif
}

.box-border {
  box-sizing: border-box;
}

.box-content {
  box-sizing: content-box;
}

.jty-eve {
  justify-content: space-evenly;
}

.text-over {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-nowrap {
  white-space: nowrap;
}

.text-center {
  text-align: center;
}

.text-end {
  text-align: end;
}

.text-start {
  text-align: start;
}
// #endif

// 边框
.border {
  border: 1px solid $box-bor-color !important;
}

.border-top {
  border-top: 1px solid $box-bor-color !important;
}

.border-bottom {
  border-bottom: 1px solid $box-bor-color !important;
}

.border-left {
  border-left: 1px solid $box-bor-color !important;
}

.border-right {
  border-right: 1px solid $box-bor-color !important;
}

// 全局背景
.pageBox-nvue {
  background-color: $bg-grey;
  /* #ifdef APP-PLUS */
  flex: 1;
  /* #endif */
  /* #ifndef APP-PLUS */
  height: 100vh;
  /* #endif */
}

.pageBox-vue {
  background-color: $bg-grey;
  height: 100vh;
}
